<!--
 * @Author: your name
 * @Date: 2021-08-04 17:10:06
 * @LastEditTime: 2021-08-06 12:02:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\15-组件\父组件子组件数据传输.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>父子组件相互通信</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 注意一定是先引入vue.js文件，再引入组件的js文件 -->
  </head>
  <body>
    <!-- 子组件使用父组件的内容  $parent -->
    <!-- app这个vue实例是一个父级组件，b-div组件是一个子级组件 -->
    <div id="app">
      <b-div title="汽车"></b-div>
      <b-div title="飞机"></b-div>
      <b-div title="火车"></b-div>

      <!-- 由于获取子组件时候循序不确定，因此给子组件加上特殊的属性ref -->
      <!-- 在组件上添上ref属性，在 父组件中通过$refs可以获取到所有带有ref属性的子组件 -->
      <b-div ref="car" title="汽车"></b-div>
      <b-div ref="palne" title="飞机"></b-div>
      <b-div ref="train" title="火车"></b-div>
    </div>
    <script>
      // 页面加载时先渲染里面的组件，再渲染外面的组件
      // 在子组件里面打印父组件中data的属性name，age
      Vue.component("b-div", {
        props: ["title"],
        template: `
            <div>
                div：{{title}}----{{name}}----{{$parent.age}}
            </div>
            `,
        // 获取父组件属性方法一：在模板里面直接{{$parent.属性}}获取
        data() {
          return {
            // 获取父组件的属性方法二：在data中用属性接收
            name: this.$parent.name,
            address: "上海",
          };
        },
        mounted() {
          console.log(this.title + "渲染完毕.......");
          // this.$parent是父组件对象
          console.log(this.$parent.name);
        },
      });
      new Vue({
        el: "#app",
        data() {
          return {
            name: "Jack",
            age: 21,
          };
        },
        mounted() {
          console.log("app 渲染完毕.......");
          // 通过console.log()输出的结果显示渲染是从底层开始到最外层

          // children返回所有的子组件信息，并不保证顺序，也不是响应式的
          console.log(this.$children[0].address);
          // this.$children返回额子组件对象顺序不一定按照页面写的顺序，渲染会有所不同

          console.log(this.$refs);

          // 注意，$children返回的是子组件的数组,需要使用下标来索引
          // 注意，$refs返回的是子组件对象，需要通过属性来获取对应的组件

          console.log(this.$refs.car.name);
        },
      });
    </script>
  </body>
</html>
